<!--
   动态菜单 item 递归实现
   myRouter ： 菜单列表
   initLevel ： 菜单初始化缩进等级
-->
<template>
  <div>
    <div v-for="(item, index) in myRouter" :key="index">
      <!-- 先判断当前菜单是否需要显示 -->
      <div v-if="item.status == 1">
        <!-- 当没有子菜单时，结束递归 -->
        <div v-if="!item.children">
          <q-expansion-item
            :header-inset-level="initLevel + 0.7"
            :to="item.view_path"
            expand-icon-class="expansion-hide-icon"
            :label="item.name"
          />
        </div>

        <!-- 子菜单依然存在时，继续递归 -->
        <div v-else>
          <q-expansion-item
            expand-separator
            :header-inset-level="
              item.children &&
              item.children.some((val) => val.status === 1) &&
              item.children.some((val) => val.is_menu === 1)
                ? initLevel
                : initLevel + 0.7
            "
            :to="
              item.children &&
              item.children.some((val) => val.status === 1) &&
              item.children.some((val) => val.is_menu === 1)
                ? ''
                : item.view_path
            "
            :icon="
              item.children &&
              item.children.some((val) => val.status === 1) &&
              item.children.some((val) => val.is_menu === 1)
                ? item.icon
                : ''
            "
            :label="item.name"
            :expand-icon-class="
              item.children &&
              item.children.some((val) => val.status === 1) &&
              item.children.some((val) => val.is_menu === 1)
                ? ''
                : 'expansion-hide-icon'
            "
          >
            <!-- 进入下一次递归 -->
            <my-q-menu-item
              :my-router="item.children"
              :init-level="initLevel + 0.3"
            />
          </q-expansion-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import MyQMenuItem from '@/components/MyQMenuItem/index.vue';

export default {
  name: 'my-q-menu-item',
  data() {
    return {};
  },
  props: ['myRouter', 'initLevel'],
  methods: {},
};
</script>

<style scoped lang="scss">
.expansion-hide-icon {
  display: none;
}
</style>
<style>
.q-item.q-router-link--active,
.q-item--active {
  background: #eaf1f9;
}
</style>
